<template>
	<view class="login">

		<view class="header">
			<view :style="{paddingTop:statusBar+'px'}" class="title">
				<view class="titleImages" @click="titleImage()">
					<image src="../../static/service/back.png" mode=""></image>
				</view>
				<!-- <view :style="{lineHeight:navbar+'px'}" class="textNavigation">智慧膳食</view> -->
				<view class=""></view>
			</view>
			<view class="header_logon">用户注册</view>
			<view class="header_content">您好欢迎来到数学竞赛宝</view>
		</view>


		<view class="centerForm">
			<!-- 自定义表单校验 -->

			<uni-forms ref="form1" :modelValue="userInfo" label-position="top" validate-trigger="bind">
				<uni-forms-item label="用户名" required name="userName">
					<uni-easyinput v-model="userInfo.userName" placeholder="请输入用户名"
						@blur="binddata('account', $event.detail.value)" />
				</uni-forms-item>


				<uni-forms-item label="密码" required name="password">
					<uni-easyinput v-model="userInfo.password" placeholder="请输入密码" type="password"
						@focus="passwordFocus()" @blur="passwordBlur()" :focus="focus" />
					<!-- <uni-easyinput v-model="userInfo.password" placeholder="请输入密码" type="password" :focus /> -->
				</uni-forms-item>


				<uni-forms-item label="确认密码" required name="passwordConfirm">
					<uni-easyinput v-model="userInfo.passwordConfirm" placeholder="确认输入密码" type="password"
						@blur="binddata('account', $event.detail.value)" />
				</uni-forms-item>
			</uni-forms>
			<!-- 	<button type="primary" @click="submit('form1')">提交</button> -->
		</view>

		<!-- 	<u-button type="primary" class="define" @click="define()">立即注册</u-button> -->
		<view class="define" @click="define()">立即注册</view>
		<!-- 立即注册-->
		<view class="registerNowForgotPassword">
			<view class="registerNowForgotPassword_content" @click="toLogin()"> 已有账号？立即去登录</view>
		</view>
		<u-toast ref="uToast" title="" />
	</view>
</template>

<script>
	export default {
		data() {
			//确认密码
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.userInfo.password) {
					callback(new Error('两次输入密码不一致,请重新输入!'));
				} else {
					callback();
				}
			};
			return {
				active: true,
				psdEyes: true,
				roundCurrent: false, //点击阅读协议里边的圆点
				userInfo: {
					userName: "",
					passwordConfirm: "",
					password: ""
				},
				navbar: 0, //状态栏高度
				statusBar: 0, // 状态栏高度 + 导航栏高度  
				customBar: 0, // 自定义标题与胶囊对齐高度

				rules: {
					userName: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					// 	/^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,

					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空',
						}, {
							validateFunction: function(rule, value, data, callback) {
								let passwordReg =
									/^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[!#@*&.])[a-zA-Z\d!#@*&.]{8,}$/;
								if (!passwordReg.test(value)) {
									callback('密码必须包含大小写字母、数字、特殊字符且至少8位')
								}
								return true
							}
						}]
					},
					passwordConfirm: {
						rules: [{
								required: true,
								errorMessage: '确认密码不能为空',
							},

							{
								validateFunction: function(rule, value, data, callback) {
									console.log(data, "2222222222222222222");
									if (value !== data.password) {
										callback('两次输入的密码不一致，请重新输入')
									} else {
										return true
									}

								}
							}
						]
					},
				},


			};
		},
		onReady() {
			// 表单设置校验规则
			this.$refs.form1.setRules(this.rules);
		},
		methods: {
			// 去登陆
			toLogin() {
				console.log(111);
				uni.navigateTo({
					url: '/pages/login/index'
				});
			},



			//确定
			define(ref) {
				console.log();
				this.$refs.form1.validate().then(res => {
					console.log('success', res);
					console.log("验证成功");


					this.$http({
							url: "register",
							method: 'POST',
							data: this.userInfo
						}).then((res) => {
							if (res.code == 200) {
								uni.showToast({
									title: `校验通过`
								})
								console.log(1111);
								uni.setStorageSync("userName", this.userInfo.userName)
								// console.log(111111111111111111111111111111111111111111111111111111);
								uni.navigateTo({
									url: "../../subpkg/forgotPasswordSuccess/index?register=registerOk"
								})
							} else {
								uni.showToast({
									title: res.msg || '系统异常,请稍后重试',
									icon: "none",
									duration: 2000
								})
							}
						})
						.catch((err) => {
							uni.showToast({
								title: err.msg,
								icon: 'none'
							});
						})
				})
			},
			// 协议的圆点
			round() {
				// console.log(111);
				this.roundCurrent = !this.roundCurrent
			},

			// 返回上一层
			titleImage() {
				uni.navigateBack()
			},
		},
		mounted() {
			uni.getSystemInfo({
				success: (e) => {

					this.statusBar = e.statusBarHeight + 10
					const custom = uni.getMenuButtonBoundingClientRect()
					this.customBar = custom.bottom + custom.top - e.statusBarHeight
					this.navbar = (custom.top - e.statusBarHeight) * 2 + custom.height

				}
			})
		}
	}
</script>

<style lang="scss">
	.login {
		background: #fff;
		// height: 100%;
		height: 100vh;
		width: 100%;

		.title {
			text-align: center;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #27282E;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.titleImages {
				margin-top: 18rpx;
				background-size: 100% 100%;
				width: 18rpx;
				height: 34rpx;
				position: relative;

				image {
					position: absolute;
					margin-left: 30rpx;
					width: 100%;
					height: 100%;
				}
			}
		}

		// 头部
		.header {
			width: 100%;
			// height: 485rpx;
			background-image: url();
			background-size: 100% 100%;

			//注册
			.header_logon {
				text-align: center;
				width: 100%;
				height: 90rpx;
				font-size: 40rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 56rpx;
				// background: red;
				// padding-left: 58rpx;
				padding-top: 79rpx;
			}

			.header_content {
				text-align: center;
				// margin-top: -10rpx;
			}

		}


		// 表单部分
		.centerForm {
			margin-top: 30rpx;
			padding: 0 64rpx;

			// 获取验证码的输入框
			/deep/ .uni-easyinput {
				position: relative;
				width: 622rpx;
				// height: 104rpx;
				background: #F2F2F2;
				border-radius: 24rpx;
			}

			// 输入框
			/deep/ .is-input-border {
				background: #F2F2F2;
				border-radius: 24rpx;
			}



			// 获取验证码
			.obtainVerificationCode {
				position: absolute;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #2370FC;
				line-height: 40rpx;
				top: 18rpx;
				right: 50rpx;
				z-index: 99;

				.obtainVerificationCode_text {
					margin-right: 6rpx;
				}
			}

			// 展示密码提示
			.passroasToastWrap {
				position: absolute;
				width: 534rpx;
				height: 128rpx;
				background: #fff;
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.14);
				border-radius: 8rpx;
				z-index: 999999999999999999999;
				left: 107rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-around;


				.passroasToastItem {

					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 24rpx;
					margin-left: 62rpx;
					// background: yellow;
					display: flex;
					align-items: center;

					.passwordRound {
						width: 12rpx;
						height: 12rpx;
						background: #D8D8D8;
						border-radius: 50%;
						margin-right: 10rpx;
					}
				}

			}


		}


		//协议
		.agreement {
			width: 622rpx;
			display: flex;
			justify-content: center;
			// margin-top: 28rpx;
			margin-left: 27rpx;

			.round {
				width: 24rpx;
				height: 24rpx;
				background: #FFFFFF;
				border: 2rpx solid #999999;
				border-radius: 50%;
				margin-right: 12rpx;
				margin-top: 5rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.mimi_round {
					width: 12rpx;
					height: 12rpx;
					margin-left: -1rpx;
					background: #2370FC;
					border-radius: 50%;
				}
			}

			.agreement_text {
				font-size: 24rpx;
				font-family: MicrosoftYaHei;
				line-height: 31rpx;

				.noBuldText {
					color: #999999;
				}

				.buldText {
					color: #333;
				}
			}
		}

		// 确定
		.define {
			margin: 0 auto;
			width: 622rpx;
			height: 104rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #2370FC;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(35, 112, 252, 0.33);
			border-radius: 24rpx;
			margin-top: 24rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 45rpx;
		}

		// 立即注册忘记密码
		.registerNowForgotPassword {
			width: 100%;
			height: 37rpx;
			text-align: center;
			margin-top: 40rpx;

			.registerNowForgotPassword_content {
				// position: absolute;
				font-size: 28rpx;
				font-family: MicrosoftYaHei;
				color: #999999;
				line-height: 37rpx;
			}
		}
	}
</style>